<template>
    <div style="padding: 10px">
        <div style="margin: 10px 0">
            <el-input v-model="search" placeholder="请输入项目名称" style="width: 20%" clearable></el-input>
            <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
        </div>
        <el-table
                :data="tableData"
                stripe
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID"
                    sortable>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="项目名称">
            </el-table-column>
            <el-table-column
                    prop="unitId"
                    label="单位ID">
                <template #default="scope">
                    <el-button  type="text" @click="handleUnit(scope.row.unitId)">
                        {{scope.row.unitId}}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="leaderId"
                    label="组长ID">
                <template #default="scope">
                    <el-button  type="text" @click="handleLeader(scope.row.leaderId)">
                        {{scope.row.leaderId}}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    prop="finishTime"
                    label="结束时间">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="审核情况"
                    :filters="[{text: '已审批未通过', value: 0},{text: '已审批已通过', value: 1}, {text: '未审批', value: 2}]"
                    :filter-method="filterHandler">
                <template #default="scope">
                    <el-button v-if="scope.row.state=='1'" size="mini" type="success">
                        已通过
                    </el-button>
                    <el-button v-if="scope.row.state=='0'" size="mini">
                        未通过
                    </el-button>
                    <el-button v-if="scope.row.state=='2'" size="mini" type="info">
                        未处理
                    </el-button>
                    <el-button v-if="scope.row.state=='3'" size="mini" type="success">
                        已处理
                    </el-button></template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-button size="mini" style="margin-left: 5px" @click="handlePlus(scope.row.id,scope.row.state)">同意</el-button>
                    <el-button size="mini" style="margin-right: 5px" @click="handleSubtract(scope.row.id,scope.row.state)">撤销</el-button>
                    <el-button size="mini" style="margin-left: 5px" @click="handleEdit(scope.row)">查看</el-button>
                    <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
                        <template #reference>
                            <el-button size="mini" style="margin-right: 5px" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 6, 15]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
            <el-dialog
                    title="提示"
                    v-model="dialogVisible"
                    width="30%">
                <el-form :model="form" label-width="120px">
                    <el-form-item label="项目名称">
                        <el-input v-model="form.name" disabled="disabled"></el-input>
                    </el-form-item>
                    <el-form-item label="单位ID">
                        <el-input v-model="form.unitId" disabled="disabled"></el-input>
                    </el-form-item>
                    <el-form-item label="组长ID">
                        <el-input v-model="form.leaderId" disabled="disabled"></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <el-date-picker v-model="form.createTime" value-format="YYYY-MM-DD" type="date" style="width: 80%" disabled="disabled"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker v-model="form.finishTime" value-format="YYYY-MM-DD" type="date" style="width: 80%" disabled="disabled"></el-date-picker>
                    </el-form-item>
                   <!-- <el-form-item label="审核情况">
                        <el-radio v-model="form.state" label="0">未通过</el-radio>
                        <el-radio v-model="form.state" label="1">通过</el-radio>
                        <el-radio v-model="form.state" label="2">未审批</el-radio>
                    </el-form-item>-->

                </el-form>
                <template #footer>
           <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="save">确 定</el-button>
           </span>
                </template>
            </el-dialog>
            <el-dialog
                    title="单位信息"
                    v-model="dialogVisible1"
                    width="30%">
                <el-form :model="form1" label-width="120px">
                    <el-form-item label="单位ID">
                        <el-input v-model="form1.id" disabled="disabled"></el-input>
                    </el-form-item>
                    <el-form-item label="单位名称">
                        <el-input v-model="form1.name" disabled="disabled"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
           <span class="dialog-footer">
              <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
           </span>
                </template>
            </el-dialog>
            <el-dialog
                    title="组长信息"
                    v-model="dialogVisible2"
                    width="30%">
                <el-form :model="form2" label-width="120px">
                    <el-form-item label="组长ID">
                        <el-input v-model="form2.id" disabled="disabled"></el-input>
                    </el-form-item>
                    <el-form-item label="组长姓名">
                        <el-input v-model="form2.name" disabled="disabled"></el-input>
                    </el-form-item>
                    <el-form-item label="组长email">
                        <el-input v-model="form2.email" disabled="disabled"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="form2.password" disabled="disabled"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-input v-model="form2.sex" disabled="disabled"></el-input>
                    </el-form-item>
                    <el-form-item label="成员类型">
                        <el-input v-model="form2.type" disabled="disabled"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
           <span class="dialog-footer">
              <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
           </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script>


    import http from "../../utils/req";

    export default {
        name: 'ProjectManage',
        components: {

        },
        data(){
            return{
                form:{},
                form1:{},
                form2:{},
                dialogVisible: false,
                dialogVisible1: false,
                dialogVisible2: false,
                search:'',
                currentPage:1,
                pageSize:6,
                total:10,
                tableData : [
                ],
            }
        },
        created() {
            this.load()
        },
        methods:{
            load(){
                http.get("project",{
                    params : {
                        pageNum:this.currentPage,
                        pageSize:this.pageSize,
                        search:this.search,
                    }
                }).then(res => {
                    console.log(res)
                    this.tableData=res.data.data.records
                    this.total=res.data.data.total
                })
            },
            save(){
                this.dialogVisible = false
            },
            handleEdit(row){
                /*深拷贝*/
                this.form = JSON.parse(JSON.stringify(row))
                this.dialogVisible = true
            },
            handleDelete(id){
                console.log(id)
                http.put("project/delete/" + id).then(res => {
                    if (res.data.code === '0') {
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg
                        })
                    }
                    this.load()  // 删除之后重新加载表格的数据
                })

            },

            handlePlus(id,state){
                console.log(id,state)
                http.put("project/plus/" + id).then(res => {
                    if(state === 0){
                        if (res.data.code === '0') {
                            this.$message({
                                type: "success",
                                message: "操作成功"
                            })
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg
                            })
                        }
                    } else {
                        this.$message('该项目已经审核通过')
                    }
                    this.load()  // 重新加载表格的数据
                })

            },

            handleSubtract(id,state){
                console.log(id,state)
                http.put("project/subtract/" + id).then(res => {
                    if(state === 1){
                        if (res.data.code === '0') {
                            this.$message({
                                type: "success",
                                message: "操作成功"
                            })
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg
                            })
                        }
                    } else {
                        this.$message('该项目尚未审核通过')
                    }
                    this.load()  // 重新加载表格的数据
                })

            },
            handleUnit(unitId){
                http.get("unit/" + unitId).then(res => {
                    console.log(res)
                    this.form1 = res.data.data
                })
                this.dialogVisible1 = true
            },
            handleLeader(leaderId){
                http.get("leader/" + leaderId).then(res => {
                    console.log(res)
                    this.form2 = res.data.data
                })
                this.dialogVisible2 = true
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            handleSizeChange(pageSize){
                this.pageSize=pageSize
                this.load()
            },
            handleCurrentChange(pageNum){
                this.currentPage=pageNum
                this.load()
            }
        }
    }
</script>
